<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        html, body, ul{
            width: 100%;
            height: 100%;
        }
        #ps{
            position: relative;
        }
        #ps li{
            position: absolute;
            width: 250px;
            height: 360px;
            box-shadow: 0 0 10px #000;
            transition: all 1s;
        }
        #ps li.current{
            left: 50% !important;
            top:50% !important;
            transform: rotate(0deg) translate(-50%, -50%) scale(1.5, 1.5) !important;
            z-index: 99;
        }
    </style>
</head>
<body>
<ul id="ps"></ul>
<script src="js/Underscore-min.js"></script>
<script>
    window.onload=function () {
        var ps = document.getElementById("ps");
        for(var i=0;i<10;i++){
            var li = document.createElement("li")
            ps.appendChild(li);

            var img = document.createElement("img");
            img.src="images/pic"+(i+1)+".jpg";
            li.appendChild(img);
        }
        var AllLis = ps.children;
        var sreenW=document.documentElement.clientWidth-250;
        var sreenH = document.documentElement.clientHeight-350;
        for(var j=0;j<AllLis.length;j++){
            var li= AllLis[j];
            li.style.left =_.random(0,sreenW)+"px";
            li.style.top = _.random(0,sreenH)+"px";
            li.style.transform = 'rotate(' + _.random(0, 360) +'deg)';
            li.onclick=function () {
                for(var z=0;z<AllLis.length;z++){
                    AllLis[z].className="";
                }
                this.className="current";
            }
        }

    }
</script>
</body>
</html>